<template>
  <div>
    <p>您输入的地址有误，请检查后重试！</p>
    <!-- 声明式导航-内置组件导航 -->
    <!-- router-link是一个经过处理的a标签 只会切换组件 不会刷新页面 -->
    <!-- tag="h1" 指定将router-link渲染成什么样的标签 -->
    <!-- to是必填属性，router-link是子组件，notfound是父组件，to属性就是父传子，加了必填的校验  -->
    <!-- replace 用新的地址替换老的地址 不会额外增加历史记录 -->
    <!-- 正常的跳转方式：跳转一个页面就增加一条记录 -->
    <router-link exact-active-class="hesuan" :to="'/canshu?name=' + tangZhu"
      >-canshu-</router-link
    >
    <router-link exact-active-class="hesuan" to="/">返回首页1</router-link>
    <router-link exact-active-class="hesuan" to="/error">返回error</router-link>
    <router-link exact-active-class="hesuan" to="/big">返回big页</router-link>
    <router-link exact-active-class="hesuan" to="/father"
      >返回father页</router-link
    >
    <router-link exact-active-class="hesuan" to="/helloworld"
      >返回helloworld页</router-link
    >
    <hr />
    <button @click="change('/canshu')">参数页</button>
    <button @click="change('/')">返回首页</button>
    <button @click="change('/big')">返回big页</button>
    <button @click="change('/father')">返回father页</button>
    <button @click="change('/helloworld')">返回helloworld页</button>
    <button @click="nameRouter">命名路由</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tangZhu: "llhh",
    };
  },
  created() {
    console.log(11, this.$router);
    console.log(22, this.$route);
  },
  methods: {
    change(url) {
      // 编程式导航
      // if(login) {
      //     this.$router.push(url)
      // }else {
      //     alert('xxxx')
      // }
      // this.$router.push(url+'?age=18'); // 简单的方式
      // 复杂的方式
      // go(-1) 常见于后退按钮
      this.$router.push({
        path: url,
        query: { age: 18, name: "Pony" },
      });
    },
    nameRouter() {
      // 通过命名路由跳转
      this.$router.push({
        name: "aaa",
      });
    },
  },
};
</script>

<style>
</style>